<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navigate-title">
				<navigator url="/pages/index/index" open-type="switchTab" class="back-button">
					<view style="display: flex;">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="header-title">发票管理</text>
					</view>
				</navigator>
			</view>
			<view slot="right">
				<view class="filter-button" @click="toggleFilterPanel">
					<text class="fa fa-filter filter-icon"></text>
				</view>
				<view class="search-button" @click="toggleSearchBar"></view>
			</view>
		</u-navbar>

		<!-- 标签页导航 -->
		<view class="tab-container">
			<view class="tab-content">
				<view class="tab-item" :class="{'active-tab': activeTab === 'all', 'inactive-tab': activeTab !== 'all'}"
					@click="switchTab('all')">
					全部
				</view>
				<view class="tab-item"
					:class="{'active-tab': activeTab === 'pending', 'inactive-tab': activeTab !== 'pending'}"
					@click="switchTab('pending')">
					待认证
				</view>
				<view class="tab-item"
					:class="{'active-tab': activeTab === 'completed', 'inactive-tab': activeTab !== 'completed'}"
					@click="switchTab('completed')">
					已认证
				</view>
				<view class="tab-item"
					:class="{'active-tab': activeTab === 'invalid', 'inactive-tab': activeTab !== 'invalid'}"
					@click="switchTab('invalid')">
					已作废
				</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-container" :class="{'search-hidden': !showSearchBar}">
			<view class="search-input-wrapper">
				<input type="text" placeholder="搜索发票..." class="search-input" v-model="searchKeyword"
					@input="searchInvoices">
				<text class="search-icon fa fa-search"></text>
				<view class="close-search" @click="toggleSearchBar">
					<text class="close-icon fa fa-times"></text>
				</view>
			</view>
		</view>

		<!-- 筛选面板 -->
		<view class="filter-panel-overlay" :class="{'filter-hidden': !showFilterPanel}">
			<view class="filter-panel-content">
				<view class="filter-panel-header">
					<view class="filter-panel-title-wrapper">
						<text class="filter-panel-title">筛选条件</text>
						<view class="close-filter-panel" @click="toggleFilterPanel">
							<text class="close-icon fa fa-times"></text>
						</view>
					</view>
				</view>
				<view class="filter-panel-body">
					<view class="filter-section">
						<text class="filter-label">发票类型</text>
						<picker class="filter-picker" mode="selector" :range="invoiceTypes" range-key="label"
							v-model="selectedInvoiceType" @change="onInvoiceTypeChange">
							<view class="picker-view">
								{{ selectedInvoiceType == -1 ? '全部类型' : invoiceTypes[selectedInvoiceType].label }}
							</view>
						</picker>
					</view>

					<view class="filter-section">
						<text class="filter-label">开票日期</text>
						<view class="date-range-wrapper">
							<view class="date-picker-wrapper">
								<picker mode="date" start="2010-01-01" :end="currentDate" :value="startDate"
									@change="onStartDateChange">
									<view class="date-picker">
										{{ startDate || '开始日期' }}
									</view>
								</picker>
							</view>
							<view class="date-picker-wrapper">
								<picker mode="date" start="2010-01-01" :end="currentDate" :value="endDate"
									@change="onEndDateChange">
									<view class="date-picker">
										{{ endDate || '结束日期' }}
									</view>
								</picker>
							</view>
						</view>
					</view>

					<view class="filter-section">
						<text class="filter-label">金额范围</text>
						<view class="amount-range-wrapper">
							<input type="number" placeholder="最小值" class="amount-input" v-model="minAmount">
							<input type="number" placeholder="最大值" class="amount-input" v-model="maxAmount">
						</view>
					</view>

					<view class="filter-section">
						<text class="filter-label">认证状态</text>
						<picker class="filter-picker" mode="selector" :range="invoiceStatuses" range-key="label"
							v-model="selectedInvoiceStatus" @change="onInvoiceStatusChange">
							<view class="picker-view">
								{{ selectedInvoiceStatus == -1 ? '全部状态' : invoiceStatuses[selectedInvoiceStatus].label }}
							</view>
						</picker>
					</view>

					<view class="filter-actions">
						<view class="filter-action-button reset-button" @click="resetFilters">重置</view>
						<view class="filter-action-button apply-button" @click="applyFilters">确定</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="main-content">
			<!-- 快捷操作 -->
			<view class="quick-actions">
				<navigator url="addInport/addInport" class="quick-action-item">
					<view class="quick-action-icon add-icon">
						<u-icon color="#1e88e5" size="32" name="plus-circle"></u-icon>
					</view>
					<text class="quick-action-text">添加发票</text>
				</navigator>
				<view class="quick-action-item" @click="batchCertify">
					<view class="quick-action-icon certify-icon">
						<u-icon color="#1e88e5" size="32" name="coupon"></u-icon>
					</view>
					<text class="quick-action-text">批量认证</text>
				</view>
				<view class="quick-action-item" @click="batchInvalid">
					<view class="quick-action-icon invalid-icon">
						<u-icon color="#1e88e5" size="32" name="close-circle-fill"></u-icon>
					</view>
					<text class="quick-action-text">批量作废</text>
				</view>
				<view class="quick-action-item" @click="showStatistics">
					<view class="quick-action-icon stats-icon">
						<u-icon color="#1e88e5" size="32" name="calendar-fill"></u-icon>
					</view>
					<text class="quick-action-text">发票统计</text>
				</view>
			</view>

			<!-- 发票列表 -->
			<view class="invoice-list" v-if="filteredInvoices.length > 0">
				<view class="invoice-card" v-for="(invoice, index) in filteredInvoices" :key="index">
					<view class="invoice-header">
						<view class="invoice-info">
							<view class="invoice-icon">
								<text class="fa fa-file-text-o"></text>
							</view>
							<view class="invoice-details">
								<text class="invoice-title">{{ invoice.title }}</text>
								<text class="invoice-number">{{ invoice.invoiceNo }}</text>
							</view>
						</view>
						<text class="invoice-status" :class="invoiceStatusClasses[index]">
							{{ getStatusText(invoice.status) }}
						</text>
					</view>
					<view class="invoice-meta">
						<view class="meta-item">
							<text class="meta-label">日期:</text>
							<text class="meta-value">{{ invoice.date }}</text>
						</view>
						<view class="meta-item">
							<text class="meta-label">金额:</text>
							<text class="meta-value">¥{{ formatCurrency(invoice.amount) }}</text>
						</view>
					</view>
					<view class="invoice-type-row meta-item">
						<text class="meta-label">类型:</text>
						<view class="meta-value meta-label ">{{ getInvoiceTypeText(invoice.type) }}</view>
					</view>
					<view class="invoice-actions">
						<view class="action-button view-button" @click="viewInvoice(invoice.id)">查看</view>
						<view class="action-button edit-button" @click="editInvoice(invoice.id)">编辑</view>
						<view class="action-button"
							:class="invoice.status == 'pending' ? 'certify-button' : 'invalid-button'"
							@click="handleInvoiceAction(invoice.id, invoice.status)">
							{{ invoice.status == 'pending' ? '认证' : '作废' }}
						</view>
					</view>
				</view>
			</view>

			<!-- 无数据提示 -->
			<view class="empty-state" v-else>
				<view class="empty-icon">
					<text class="fa fa-file-text-o"></text>
				</view>
				<text class="empty-title">暂无发票记录</text>
				<text class="empty-message">点击下方按钮添加第一张发票</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer-container">
			<view class="footer-content">
				<view class="footer-left">
					<text class="footer-text">总计: </text>
					<text class="footer-count">{{ filteredInvoices.length }}</text>
					<text class="footer-text"> 张发票</text>
				</view>
				<navigator url="/pageNew/pages/invoice/add-invoice" class="add-invoice-button">
					<text class="fa fa-plus"></text>添加发票
				</navigator>
			</view>
		</view>

		<!-- 发票操作确认弹窗 -->
		<view class="action-modal-overlay" :class="{'modal-hidden': !showActionModal}">
			<view class="action-modal">
				<view class="modal-header">
					<text class="modal-title">{{ actionType == 'certify' ? '确认认证' : '确认作废' }}</text>
				</view>
				<view class="modal-body">
					<text class="modal-message">
						{{ actionType == 'certify' ? '您确定要认证这张发票吗？' : '您确定要作废这张发票吗？此操作不可撤销。' }}
					</text>
					<input type="hidden" v-model="currentInvoiceId">
					<view class="modal-actions">
						<view class="modal-button cancel-button" @click="toggleActionModal">取消</view>
						<view class="modal-button"
							:class="actionType == 'certify' ? 'confirm-certify-button' : 'confirm-invalid-button'"
							@click="confirmInvoiceAction">
							{{ actionType == 'certify' ? '认证' : '作废' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标签页状态
				activeTab: 'all',

				// 搜索状态
				showSearchBar: false,
				searchKeyword: '',

				// 筛选状态
				showFilterPanel: false,
				startDate: '',
				endDate: '',
				minAmount: '',
				maxAmount: '',
				currentDate: this.formatDate(new Date()),

				// 发票类型和状态
				invoiceTypes: [{
						value: 'special',
						label: '增值税专用发票'
					},
					{
						value: 'ordinary',
						label: '增值税普通发票'
					},
					{
						value: 'electronic',
						label: '电子发票'
					},
					{
						value: 'motor',
						label: '机动车销售统一发票'
					},
					{
						value: 'other',
						label: '其他发票'
					}
				],
				invoiceStatuses: [{
						value: 'pending',
						label: '待认证'
					},
					{
						value: 'completed',
						label: '已认证'
					},
					{
						value: 'invalid',
						label: '已作废'
					}
				],
				selectedInvoiceType: -1,
				selectedInvoiceStatus: -1,

				// 发票数据
				invoices: [{
						id: '1',
						title: '办公用品采购',
						invoiceNo: '110012345678',
						type: 'special',
						date: '2024-10-20',
						amount: 1200.00,
						status: 'pending',
						seller: '北京办公用品有限公司',
						taxRate: 13,
						taxAmount: 138.05,
						remark: '购买打印机和纸张'
					},
					{
						id: '2',
						title: '差旅费报销',
						invoiceNo: '110012345679',
						type: 'ordinary',
						date: '2024-10-18',
						amount: 3500.00,
						status: 'pending',
						seller: '上海旅行社有限公司',
						taxRate: 6,
						taxAmount: 198.11,
						remark: '员工出差费用'
					},
					{
						id: '3',
						title: '10月份房租',
						invoiceNo: '110012345680',
						type: 'special',
						date: '2024-10-05',
						amount: 5000.00,
						status: 'completed',
						seller: '北京房地产有限公司',
						taxRate: 9,
						taxAmount: 412.84,
						remark: '公司办公场所租金'
					},
					{
						id: '4',
						title: '水电费',
						invoiceNo: '110012345681',
						type: 'ordinary',
						date: '2024-10-10',
						amount: 800.00,
						status: 'completed',
						seller: '北京电力公司',
						taxRate: 13,
						taxAmount: 92.04,
						remark: '9月份水电费'
					},
					{
						id: '5',
						title: '餐饮费',
						invoiceNo: '110012345682',
						type: 'ordinary',
						date: '2024-10-15',
						amount: 600.00,
						status: 'invalid',
						seller: '北京餐厅有限公司',
						taxRate: 6,
						taxAmount: 33.96,
						remark: '客户招待费用'
					}
				],
				filteredInvoices: [],

				// 发票操作确认弹窗
				showActionModal: false,
				currentInvoiceId: '',
				actionType: 'certify' // 'certify' 或 'invalid'
			};
		},
		onLoad() {
			console.log('发票管理页面加载完成');
			this.filteredInvoices = [...this.invoices];
			this.sortInvoicesByDate();
		},
		computed: {
			// 为每个发票生成对应的类名
			invoiceStatusClasses() {
				return this.filteredInvoices.map(inv => this.getStatusClass(inv.status));
			}
		},
		methods: {
			// 切换标签页
			switchTab(tab) {
				this.activeTab = tab;
				this.filterInvoices();
			},

			// 显示/隐藏搜索栏
			toggleSearchBar() {
				this.showSearchBar = !this.showSearchBar;
				if (this.showSearchBar) {
					this.searchKeyword = '';
				}
			},

			// 搜索发票
			searchInvoices() {
				if (!this.searchKeyword) {
					this.filteredInvoices = [...this.invoices];
					this.filterInvoices();
					return;
				}

				const keyword = this.searchKeyword.toLowerCase();
				this.filteredInvoices = this.invoices.filter(invoice =>
					invoice.title.toLowerCase().includes(keyword) ||
					invoice.invoiceNo.toLowerCase().includes(keyword) ||
					invoice.seller.toLowerCase().includes(keyword) ||
					invoice.date.includes(keyword)
				);

				this.filterInvoices();
			},

			// 显示/隐藏筛选面板
			toggleFilterPanel() {
				this.showFilterPanel = !this.showFilterPanel;
			},

			// 发票类型变更
			onInvoiceTypeChange(e) {
				this.selectedInvoiceType = e.detail.value;
			},

			// 开始日期变更
			onStartDateChange(e) {
				this.startDate = e.detail.value;
			},

			// 结束日期变更
			onEndDateChange(e) {
				this.endDate = e.detail.value;
			},

			// 发票状态变更
			onInvoiceStatusChange(e) {
				this.selectedInvoiceStatus = e.detail.value;
			},

			// 重置筛选条件
			resetFilters() {
				this.selectedInvoiceType = -1;
				this.startDate = '';
				this.endDate = '';
				this.minAmount = '';
				this.maxAmount = '';
				this.selectedInvoiceStatus = -1;
				this.filterInvoices();
			},

			// 应用筛选条件
			applyFilters() {
				this.filterInvoices();
				this.toggleFilterPanel();
			},

			// 筛选发票
			filterInvoices() {
				let filtered = [...this.invoices];

				// 根据标签页筛选
				if (this.activeTab !== 'all') {
					filtered = filtered.filter(invoice => invoice.status == this.activeTab);
				}

				// 根据发票类型筛选
				if (this.selectedInvoiceType !== -1) {
					const type = this.invoiceTypes[this.selectedInvoiceType].value;
					filtered = filtered.filter(invoice => invoice.type == type);
				}

				// 根据日期筛选
				if (this.startDate) {
					filtered = filtered.filter(invoice => invoice.date >= this.startDate);
				}

				if (this.endDate) {
					filtered = filtered.filter(invoice => invoice.date <= this.endDate);
				}

				// 根据金额范围筛选
				if (this.minAmount) {
					filtered = filtered.filter(invoice => invoice.amount >= this.minAmount);
				}

				if (this.maxAmount) {
					filtered = filtered.filter(invoice => invoice.amount <= this.maxAmount);
				}

				// 根据发票状态筛选
				if (this.selectedInvoiceStatus !== -1) {
					const status = this.invoiceStatuses[this.selectedInvoiceStatus].value;
					filtered = filtered.filter(invoice => invoice.status == status);
				}

				this.filteredInvoices = filtered;
				this.sortInvoicesByDate();
			},

			// 按日期排序
			sortInvoicesByDate() {
				this.filteredInvoices.sort((a, b) => new Date(b.date) - new Date(a.date));
			},

			// 获取发票类型文本
			getInvoiceTypeText(type) {
				const typeMap = {
					'special': '增值税专用发票',
					'ordinary': '增值税普通发票',
					'electronic': '电子发票',
					'motor': '机动车销售统一发票',
					'other': '其他发票'
				};

				return typeMap[type] || type;
			},

			// 获取发票状态文本
			getStatusText(status) {
				const statusMap = {
					'pending': '待认证',
					'completed': '已认证',
					'invalid': '已作废'
				};

				return statusMap[status] || status;
			},

			// 获取发票状态样式
			getStatusClass(status) {
				switch (status) {
					case 'pending':
						return 'status-pending';
					case 'completed':
						return 'status-completed';
					case 'invalid':
						return 'status-invalid';
					default:
						return 'status-default';
				}
			},

			// 格式化货币
			formatCurrency(amount) {
				return parseFloat(amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
			},

			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 查看发票
			viewInvoice(id) {
				uni.navigateTo({
					url: `/pageNew/pages/invoice/view?id=${id}`
				});
			},

			// 编辑发票
			editInvoice(id) {
				uni.navigateTo({
					url: `/pageNew/pages/invoice/edit?id=${id}`
				});
			},

			// 处理发票操作
			handleInvoiceAction(id, status) {
				this.currentInvoiceId = id;
				this.actionType = status == 'pending' ? 'certify' : 'invalid';
				this.showActionModal = true;
			},

			// 确认发票操作
			confirmInvoiceAction() {
				const index = this.invoices.findIndex(invoice => invoice.id == this.currentInvoiceId);
				if (index !== -1) {
					this.invoices[index].status = this.actionType == 'certify' ? 'completed' : 'invalid';

					// 更新筛选后的列表
					const filterIndex = this.filteredInvoices.findIndex(invoice => invoice.id == this.currentInvoiceId);
					if (filterIndex !== -1) {
						this.filteredInvoices[filterIndex].status = this.actionType == 'certify' ? 'completed' : 'invalid';
					}
				}

				this.showActionModal = false;

				uni.showToast({
					title: this.actionType == 'certify' ? '发票认证成功' : '发票作废成功',
					icon: 'success'
				});
			},

			// 关闭操作弹窗
			toggleActionModal() {
				this.showActionModal = !this.showActionModal;
			},

			// 批量认证
			batchCertify() {
				const pendingInvoices = this.filteredInvoices.filter(invoice => invoice.status == 'pending');

				if (pendingInvoices.length == 0) {
					uni.showToast({
						title: '没有待认证的发票',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '确认认证',
					content: `确定要认证选中的 ${pendingInvoices.length} 张发票吗？`,
					success: (res) => {
						if (res.confirm) {
							pendingInvoices.forEach(invoice => {
								const index = this.invoices.findIndex(i => i.id == invoice.id);
								if (index !== -1) {
									this.invoices[index].status = 'completed';
								}
							});

							// 重新筛选列表
							this.filterInvoices();

							uni.showToast({
								title: `成功认证 ${pendingInvoices.length} 张发票`,
								icon: 'success'
							});
						}
					}
				});
			},

			// 批量作废
			batchInvalid() {
				const validInvoices = this.filteredInvoices.filter(invoice => invoice.status !== 'invalid');

				if (validInvoices.length == 0) {
					uni.showToast({
						title: '没有可作废的发票',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '确认作废',
					content: `确定要作废选中的 ${validInvoices.length} 张发票吗？此操作不可撤销。`,
					success: (res) => {
						if (res.confirm) {
							validInvoices.forEach(invoice => {
								const index = this.invoices.findIndex(i => i.id == invoice.id);
								if (index !== -1) {
									this.invoices[index].status = 'invalid';
								}
							});

							// 重新筛选列表
							this.filterInvoices();

							uni.showToast({
								title: `成功作废 ${validInvoices.length} 张发票`,
								icon: 'success'
							});
						}
					}
				});
			},

			// 显示发票统计
			showStatistics() {
				uni.navigateTo({
					url: '/pageNew/pages/invoice/statistics'
				});
			}
		}
	};
</script>

<style>
	/* 基础样式 */
	page {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		background-color: #f9fafb;
	}

	/* 页面容器 */
	.page-container {
		min-height: 100vh;
		padding-bottom: 60px;
	}

	/* 头部样式 */
	.header-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.header-content {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		padding: 12px 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.back-button {
		margin-right: 12px;
		color: #6b7280;
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #1e88e5;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.filter-button,
	.search-button {
		color: #6b7280;
	}

	.filter-icon,
	.search-icon {
		font-size: 18px;
	}

	/* 标签页样式 */
	.tab-container {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
		z-index: 90;
	}

	.tab-content {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		display: flex;
	}

	.tab-item {
		flex: 1;
		padding: 12px 16px;
		font-size: 14px;
		text-align: center;
	}

	.active-tab {
		color: #1e88e5;
		border-bottom: 2px solid #1e88e5;
		font-weight: 500;
	}

	.inactive-tab {
		color: #6b7280;
	}

	/* 搜索栏样式 */
	.search-container {
		position: fixed;
		top: 104px;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
		padding: 8px 16px;
		z-index: 80;
	}

	.search-hidden {
		display: none;
	}

	.search-input-wrapper {
		position: relative;
	}

	.search-input {
		width: 100%;
		padding: 8px 16px 8px 40px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		font-size: 14px;
	}

	.search-icon {
		position: absolute;
		left: 12px;
		top: 10px;
		color: #9ca3af;
	}

	.close-search {
		position: absolute;
		right: 12px;
		top: 8px;
		color: #9ca3af;
	}

	.close-icon {
		font-size: 16px;
	}

	/* 筛选面板样式 */
	.filter-panel-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 200;
		display: flex;
		flex-direction: column;
	}

	.filter-hidden {
		display: none;
	}

	.filter-panel-content {
		background-color: #ffffff;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		margin-top: auto;
		max-height: 70vh;
		overflow-y: auto;
	}

	.filter-panel-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.filter-panel-title-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.filter-panel-title {
		font-size: 16px;
		font-weight: 500;
	}

	.filter-panel-body {
		padding: 16px;
	}

	.filter-section {
		margin-bottom: 16px;
	}

	.filter-label {
		display: block;
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 8px;
	}

	.filter-picker {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		font-size: 14px;
	}

	.date-range-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.date-picker-wrapper {
		position: relative;
	}

	.date-picker {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		font-size: 14px;
	}

	.amount-range-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.amount-input {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		font-size: 14px;
	}

	.filter-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		padding-top: 16px;
	}

	.filter-action-button {
		padding: 8px 16px;
		border-radius: 8px;
		font-size: 14px;
	}

	.reset-button {
		background-color: #e5e7eb;
		color: #374151;
	}

	.apply-button {
		background-color: #1e88e5;
		color: #ffffff;
	}

	/* 主内容区样式 */
	.main-content {
		max-width: 750rpx;
		margin: 0 auto;
		padding: 16px;
		margin-top: 40px;
	}

	/* 快捷操作样式 */
	.quick-actions {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
		margin-bottom: 16px;
	}

	.quick-action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		padding: 12px;
	}

	.quick-action-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
	}

	.add-icon {
		background-color: #e3f2fd;
		color: #1e88e5;
	}

	.certify-icon {
		background-color: #e8f5e9;
		color: #4caf50;
	}

	.invalid-icon {
		background-color: #ffebee;
		color: #f44336;
	}

	.stats-icon {
		background-color: #e3f2fd;
		color: #1e88e5;
	}

	.quick-action-text {
		font-size: 12px;
		text-align: center;
	}

	/* 发票列表样式 */
	.invoice-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.invoice-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		padding: 12px;
	}

	.invoice-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.invoice-info {
		display: flex;
		align-items: center;
	}

	.invoice-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #e3f2fd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1e88e5;
		margin-right: 12px;
	}

	.invoice-details {
		display: flex;
		flex-direction: column;
	}

	.invoice-title {
		font-size: 14px;
		font-weight: 500;
	}

	.invoice-number {
		font-size: 12px;
		color: #6b7280;
	}

	.invoice-status {
		padding: 4px 8px;
		border-radius: 12px;
		font-size: 12px;
	}

	.status-pending {
		background-color: #fff3e0;
		color: #ff9800;
	}

	.status-completed {
		background-color: #e8f5e9;
		color: #4caf50;
	}

	.status-invalid {
		background-color: #ffebee;
		color: #f44336;
	}

	.status-default {
		background-color: #f3f4f6;
		color: #6b7280;
	}

	.invoice-meta {
		display: grid;
		color: #6b7280;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		margin-top: 12px;
		font-size: 12px;
	}

	.meta-item {
		display: flex;
	}

	.meta-label {
		color: #6b7280;
		margin-right: 4rpx;
	}

	.meta-value {
		color: #6b7280;
	}

	.invoice-type-row {
		display: flex;
		width: 100%;
		min-width: 0;
		margin-top: 8px;
	}

	.type-value {
		flex: 1;
		min-width: 0;
		white-space: nowrap;
		color: #6b7280;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.invoice-actions {
		display: flex;
		justify-content: flex-end;
		color: #6b7280;
		gap: 8px;
		margin-top: 12px;
	}

	.action-button {
		font-size: 12px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.view-button,
	.edit-button {
		color: #1e88e5;
	}

	.certify-button {
		color: #4caf50;
	}

	.invalid-button {
		color: #f44336;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 48px 0;
	}

	.empty-icon {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background-color: #f3f4f6;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
		color: #9ca3af;
		font-size: 24px;
	}

	.empty-title {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.empty-message {
		font-size: 14px;
		color: #6b7280;
		margin-bottom: 24px;
		text-align: center;
	}

	/* 底部样式 */
	.footer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1px solid #e5e7eb;
		padding: 12px 16px;
		z-index: 80;
	}

	.footer-content {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer-left {
		display: flex;
		align-items: center;
	}

	.footer-text {
		font-size: 12px;
		color: #6b7280;
	}

	.footer-count {
		font-size: 12px;
		font-weight: 500;
		color: #1e88e5;
	}

	.add-invoice-button {
		padding: 8px 16px;
		background-color: #1e88e5;
		color: #ffffff;
		border-radius: 8px;
		font-size: 14px;
		display: flex;
		align-items: center;
	}

	.add-invoice-button .fa-plus {
		margin-right: 8px;
	}

	/* 操作弹窗样式 */
	.action-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 300;
	}

	.modal-hidden {
		display: none;
	}

	.action-modal {
		background-color: #ffffff;
		border-radius: 8px;
		width: 90%;
		max-width: 400px;
	}

	.modal-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.modal-title {
		font-size: 16px;
		font-weight: 500;
	}

	.modal-body {
		padding: 16px;
	}

	.modal-message {
		font-size: 14px;
		margin-bottom: 16px;
		display: block;
	}

	.modal-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	.modal-button {
		padding: 8px 16px;
		border-radius: 8px;
		font-size: 14px;
	}

	.cancel-button {
		background-color: #e5e7eb;
		color: #374151;
	}

	.confirm-certify-button {
		background-color: #4caf50;
		color: #ffffff;
	}

	.confirm-invalid-button {
		background-color: #f44336;
		color: #ffffff;
	}
</style>